<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子书城</title>
    <link rel="stylesheet" th:href="@{/css/global.css}">
    <link rel="stylesheet" th:href="@{/css/ebook/style.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="light-theme">
<div class="theme-toggle">
    <i class="fas fa-moon"></i>
    <label class="switch">
        <input type="checkbox" id="themeSwitch">
        <span class="slider round"></span>
    </label>
    <i class="fas fa-sun"></i>
</div>

<!-- 顶部导航栏 -->
<header class="ebook-header">
    <div class="header-container">
        <div class="logo-area">
            <img th:src="@{/img/logo.png}" alt="书城Logo" class="logo">
            <h1>智能阅读</h1>
        </div>

        <div class="search-area">
            <div class="search-box">
                <label>
                    <input type="text" placeholder="搜索书名、作者或ISBN">
                </label>
                <button class="search-btn"><i class="fas fa-search"></i></button>
            </div>
        </div>

        <div class="user-area">
            <a th:href="@{/page/user/profile}" class="user-avatar">
                <img th:src="@{/img/avatar.png}" alt="用户头像">
            </a>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="ebook-main">
    <!-- 分类导航 -->
    <nav class="category-nav">
        <div class="category-container">
            <ul class="category-list">
                <li class="active"><a href="#">全部</a></li>
                <li><a href="#">文学小说</a></li>
                <li><a href="#">人文社科</a></li>
                <li><a href="#">科学技术</a></li>
                <li><a href="#">教育学习</a></li>
                <li><a href="#">经济管理</a></li>
                <li><a href="#">生活艺术</a></li>
            </ul>
        </div>
    </nav>

    <!-- 电子书展示区 -->
    <section class="ebook-showcase">
        <div class="showcase-header">
            <h2><i class="fas fa-book-open"></i> 精选推荐</h2>
            <a href="#" class="view-more">查看更多 <i class="fas fa-angle-right"></i></a>
        </div>

        <div class="book-grid">
            <!-- 图书卡片 1 -->
            <div class="book-card">
                <div class="book-cover">
                    <img th:src="@{/img/books/book1.jpg}" alt="百年孤独">
                    <div class="book-badge">热门</div>
                </div>
                <div class="book-info">
                    <h3 class="book-title">百年孤独</h3>
                    <p class="book-author">加西亚·马尔克斯</p>
                    <div class="book-meta">
                        <span class="book-category">文学小说</span>
                        <span class="book-rating">
                                <i class="fas fa-star"></i> 4.8
                            </span>
                    </div>
                </div>
            </div>

            <!-- 图书卡片 2 -->
            <div class="book-card">
                <div class="book-cover">
                    <img th:src="@{/img/books/book2.jpg}" alt="人类简史">
                    <div class="book-badge">新书</div>
                </div>
                <div class="book-info">
                    <h3 class="book-title">人类简史</h3>
                    <p class="book-author">尤瓦尔·赫拉利</p>
                    <div class="book-meta">
                        <span class="book-category">人文社科</span>
                        <span class="book-rating">
                                <i class="fas fa-star"></i> 4.9
                            </span>
                    </div>
                </div>
            </div>

            <!-- 更多图书卡片... -->
            <!-- 共12个卡片示例 -->
        </div>
    </section>

    <!-- 分页控制 -->
    <div class="pagination">
        <button class="page-btn disabled"><i class="fas fa-angle-left"></i></button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <span class="page-ellipsis">...</span>
        <button class="page-btn">10</button>
        <button class="page-btn"><i class="fas fa-angle-right"></i></button>
    </div>
</main>

<script th:src="@{/js/global.js}"></script>
</body>
</html>
